<template>
  <div class="title">地震烈度图说明</div>
  <div class="chartbox" v-html='phtml'>
  
  </div>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const phtml = ref('');
const getDatas = (e) => {
  phtml.value = e
}
// 主动暴露childMethod方法
defineExpose({ getDatas })
</script>  
  
<style lang="scss" scoped>
.title {
  height: 41px;
  color: #fff;
  line-height: 41px;
  font-size: 18px;
  padding-left: 26px;
  font-weight: bold;
}

.chartbox {
  height: calc(100% - 41px);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
  letter-spacing: 2px;
  overflow: auto;
  padding: 10px;
  box-sizing: border-box;
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    background: #01c2ff;
    cursor: pointer;
    border-radius: 4px;
  }
  &::-webkit-scrollbar-corner {
    display: none;
  }
  &::-webkit-resizer {
    display: none;
  }
}
</style>